<template>
  <Form
    ref='loginForm'
    :model='form'
    :rules='rules'
    @keydown.enter.native='handleSubmit'
  >
    <FormItem prop='userName'>
      <Input v-model='form.username' placeholder='请输入用户名'>
        <span slot='prepend'>
          <Icon :size='16' type='ios-person'></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop='password'>
      <Input type='password' v-model='form.password' placeholder='请输入密码'>
        <span slot='prepend'>
          <Icon :size='14' type='md-lock'></Icon>
        </span>
      </Input>
    </FormItem>
    <FormItem prop='code'>
      <Input class='auiu-input' v-model='form.code' placeholder='请输入验证码'>
        <span slot='prepend'>
          <Icon :size='14' type='md-image'></Icon>
        </span>
        <span class='auiu-code' slot='append' @click='_getCode()'>
          <img :src='svg' />
        </span>
      </Input>
    </FormItem>
    <FormItem>
      <Button @click='handleSubmit' type='primary' long>登录</Button>
    </FormItem>
  </Form>
</template>
<script>
import { getCode } from '@/api/login'
import { createUUID } from '@/utils'

export default {
  name: 'LoginForm',
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '账号不能为空', trigger: 'blur' }]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { type: 'string', min: 6, message: '密码长度至少为6位', trigger: 'change' }
        ]
      }
    },
    codeRules: {
      type: Array,
      default: () => {
        return [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { type: 'string', len: 4, message: '验证码长度不正确', trigger: 'change' }
        ]
      }
    }
  },
  data() {
    return {
      svg: '',
      form: {
        username: 'dries',
        password: 'Zxx131013@',
        code: ''
      }
    }
  },
  computed: {
    rules() {
      return {
        username: this.userNameRules,
        password: this.passwordRules,
        code: this.codeRules
      }
    }
  },
  mounted() {
    let sid = ''
    if (localStorage.getItem('sid')) {
      sid = localStorage.getItem('sid')
    } else {
      sid = createUUID()
      localStorage.setItem('sid', sid)
    }
    this.$store.commit('setSid', sid)
    this.form.sid = sid
    this._getCode()
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', { ...this.form })
        }
      })
    },
    _getCode() {
      const sid = this.$store.state.sid

      getCode(sid).then((res) => {
        this.svg =
          'data:image/png;base64,' +
          btoa(
            new Uint8Array(res).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ''
            )
          )
      })
    }
  }
}
</script>

<style lang='scss'>
.auiu-input {
  .ivu-input-group-append {
    padding: 0;
  }

  .ivu-input-group-prepend {
    width: 32px;
  }
}

.auiu-code {
  display: inline-block;
  padding: 0;
  height: 28px;
  overflow: hidden;

  img {
    width: 100px;
    height: 28px;
  }
}
</style>
